<md-content>
  <!--TODO remove the spaces-->
  <br/>
  <br/>
  <br/>
  <div>
    <md-list>
      <div ng-repeat="course in courses">
        <md-list-item layout="column" ng-click="selectCourse(course)" ui-sref="teacher.courseDetail">
          <div>
            <span style="font-size: 18px;color: #333;font-weight: bold;margin: 15px;">{{course.name}}</span>
            <span style="font-size: 12px;color: #666;margin: 10px;">{{course.desc}}</span>
            <span style="color: #888;font-size: 12px;">{{course.students.length}} Students</span>
          </div>
        </md-list-item>
        <md-list-item layout="column">
          <div>
            <span></span>
            <md-icon class="md-secondary material-icons" ng-click="btnUpdateCourse(course)" ui-sref="teacher.coursePost"
                     title="Edit this course">edit
            </md-icon>
            <md-icon class="md-secondary material-icons" ng-click="btnRemoveCourse(course)" title="Remove this course">
              delete
            </md-icon>
          </div>
        </md-list-item>
        <md-divider/>
      </div>
    </md-list>
    <md-button class="md-fab" ng-click="btnTargetNewCourse()" ui-sref="teacher.coursePost" id="fab" title="New Course">
      <md-icon class="material-icons">add</md-icon>
    </md-button>
  </div>
</md-content>